<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button onclick="store.disPatch({type: 'deincrement', n:3})">-</button>
    <span id="count">10</span>
    <button onclick="store.disPatch({type: 'increment', n:2})">+</button>
</body>
<script>
    const countDisplay = document.getElementById('count')
    const countState ={
        count: 11
    }

    const changeState = (state,action) => {
        if(!state) {
            return countState
        }
        switch(action.type){
            case "deincrement" :
                return{
                    ...state,
                    count: state.count -action.n
                }
              
                break;
            case  "increment" :
            
            return {
                ...state,
                count: state.count + action.n
            }
           
                break;
            default:
                break;
                return state
        }
    }
    const createStore = (changeState) => {
        let state = null
        const getState = () =>state
        const listeners = []
        const subscribe = (listener) => {
                listeners.push(listener)
        }
        const disPatch = (action) =>{
          state =  changeState(state,action)
            listeners.forEach(listener => listener())
        }
        disPatch({})
        return {
            getState,
            disPatch,
            subscribe
        }
    }

    const store = createStore(changeState)

    const countRender = () => {
        countDisplay.innerHTML = store.getState().count
    }
    countRender()
    store.subscribe(countRender)
</script>
</html>